<template>
  <div style="width: 100%;">
    <div class="header" style="width: 100%;background-color: white">
      <el-page-header @back="goBack" content="合同收款"> </el-page-header>
      <el-divider></el-divider>
    </div>

    <div style="width: 90%;margin: 0 auto">
      <div style="width: 100%;">
        <span style="font-weight: 700;font-size: 20px">基本信息</span>
      </div>
      <el-divider></el-divider>
      <el-form style="width: 100%;" label-width="100px">
        <el-container>
          <el-col :span="6">
            <el-form-item label="日期: ">
              <el-input v-model="contractReceiptForm.applyDate" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="收款编号: ">
              <el-input v-model="contractReceiptForm.id" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收款名称: ">
              <el-input v-model="contractReceiptForm.receiptName"></el-input>
            </el-form-item>
          </el-col>
        </el-container>
        <el-container>
          <el-col :span="12">
            <el-form-item label="项目: ">
              <el-input v-model="contractReceiptForm.projectName"
                ><i
                  slot="suffix"
                  @click="projectDialogVisible = true"
                  class="el-input__icon el-icon-search"
                ></i
              ></el-input>
              <el-input v-model="contractReceiptForm.pid" v-show="false"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="合同名称: ">
              <el-input v-model="contractReceiptForm.contractName" >
                <!-- <i slot="suffix" @click="contractDialogVisible = true" class="el-input__icon el-icon-search"></i> -->
              </el-input>
              <el-input v-model="contractReceiptForm.ctrId" v-show="false"></el-input>
            </el-form-item>
          </el-col>
        </el-container>
        <el-container>
          <el-col :span="6">
            <el-form-item label="合同金额: ">
              <el-input v-model="contractReceiptForm.contractAmount" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="甲方单位: ">
              <el-input v-model="contractReceiptForm.companyName" readonly >
                <!-- <i slot="suffix" @click="companyDialogVisible = true" class="el-input__icon el-icon-search"></i> -->
                </el-input>
              <el-input v-model="contractReceiptForm.companyId" v-show="false"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="收款类型: ">
              <el-select v-model="contractReceiptForm.receiptType" placeholder="请选择">
                <el-option label="按进度收款" value="按进度收款"> </el-option>
                <el-option label="按合同收款" value="按合同收款"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="罚款: ">
              <el-input v-model="contractReceiptForm.penalty"></el-input>
            </el-form-item>
          </el-col>
        </el-container>
        <el-container>
          <el-col :span="6">
            <el-form-item label="扣款: ">
              <el-input v-model="contractReceiptForm.withhold"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="已开票金额: ">
              <el-input v-model="contractReceiptForm.amountInvoiced"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="已收款金额: ">
              <el-input v-model="contractReceiptForm.contractAmount" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="收款金额: ">
              <el-input v-model="contractReceiptForm.receiptAmount" @blur="handleAmount"></el-input>
            </el-form-item>
          </el-col>
          
        </el-container>
        <el-container>
          <el-col :span="6">
            <el-form-item label="金额(大写): ">
              <el-input v-model="contractReceiptForm.amountUpper"></el-input>
            </el-form-item>
          </el-col>
          
          <el-col :span="6">
            <el-form-item label="账户信息: ">
              <el-input v-model="contractReceiptForm.account" ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="银行账户: ">
              <el-input v-model="contractReceiptForm.accountId" ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="填报人: ">
              <el-input v-model="contractReceiptForm.applyer" readonly></el-input>
            </el-form-item>
          </el-col>
        </el-container>
        <el-container>
          <el-col :span="24">
            <el-form-item label="备注: ">
              <el-input v-model="contractReceiptForm.comments" type="textarea"></el-input>
            </el-form-item>
          </el-col>
        </el-container>
      </el-form>
    </div>

    <multi-file-upload
      style="width: 90%;margin: 20px auto"
      title="附件"
      action="http://localhost/uploads"
      :params="{ folder: 'contractReceiptForm' }"
      :headers="{ token: token }"
      :show-button="!checkRoute"
      @uploadSuccess="handleUploadSuccess"
      :parent-file-list="fileList"
    ></multi-file-upload>

    
    <el-divider></el-divider>
    <div style="width: 100%;margin-left: 90px">
      <el-button type="primary" @click="handleSubmit" v-if="!checkRoute">确认提交</el-button >
    </div>

    <el-dialog title="项目选择" :visible.sync="projectDialogVisible" width="70%">
      <project-info-list @row="handleSetProject" v-if="projectDialogVisible" ></project-info-list>
    </el-dialog>

  </div>
</template>

<script>
import { DateUtil } from "../../../model/common/DateUtil";
import { AttachemenInfoService } from "../../../model/gs/AttachemenInfoService";
import { HandleNumFormat } from "../../../model/sy/HandleNumFormat.js";
import { IncomeContractService } from "../../../model/sy/IncomeContractService.js";

import { ContractReceiptService } from '../../../model/sy/ContractReceiptService.js'


const ProjectInfoList = () =>
  import("../../common/projectInfo/ProjectInfoList.vue");
// const TenderCompanyList = () => import("./TenderCompanyList.vue");
const attachemenInfoService = AttachemenInfoService.getInstance();
const incomeContractService = IncomeContractService.getInstance();

const contractReceiptService = ContractReceiptService.getInstance()

export default {
  data() {
    return {
      progressFlag: false,
      progressPercent: 10,
      contractReceiptForm: {
        id: "",
        applyDate: DateUtil.today(),
        applyer: sessionStorage.getItem("realName"),
        contractName: '',
        ctrId: '',
        contractAmount: '',
        companyName: '',
        companyId: '',
        amountUpper: '',
      },
      projectDialogVisible: false,
      companyDialogVisible: false,
      companyDialogVisible2: false,
      fileList: [],
      applyDetails: [],
      currentIndex: "",
    };
  },
  methods: {
    selectOne(id) {
      contractReceiptService.selectOne(id).then((response) => {
        if (response.data.code === 0) {
          this.contractReceiptForm = response.data.data;
        }
      });
    },
    handleAmount(value) {
      // this.contractReceiptForm.contractAmount = value.target.value;
      this.contractReceiptForm.amountUpper = HandleNumFormat.handleAmountUpper(
        parseFloat(value.target.value).toFixed(2)
      );
    },
    getFileList(id) {
      attachemenInfoService.getById(id).then((response) => {
        if (response.data.code === 0) {
          response.data.data.forEach((item) => {
            this.fileList.push({
              fileName: item.fileName,
              uploadPerson: this.contractReceiptForm.planEditor,
              uploadDate: item.uploadDate,
              filePath: item.filePath,
            });
          });
        }
      });
    },
    handleUploadSuccess(ids) {
      this.contractReceiptForm.attachIds = ids;
    },
    getMaxId() {
      contractReceiptService.getMaxId().then((response) => {
        if (response.data.code === 0) {
          this.contractReceiptForm.id = response.data.data;
        }
      });
    },
    handleSetProject(row) {
      this.contractReceiptForm.pid = row.id;
      this.contractReceiptForm.projectName = row.projectName;
      this.projectDialogVisible = false;

      incomeContractService.selectByPid(row.id).then(response=>{
        if (response.data.code === 0) {
          this.contractReceiptForm.contractName = response.data.data.contractName;
          this.contractReceiptForm.ctrId = response.data.data.id;
          this.contractReceiptForm.contractAmount = response.data.data.contractAmount;
          this.contractReceiptForm.companyName = response.data.data.companyName;
          this.contractReceiptForm.companyId = response.data.data.custId;
          this.contractReceiptForm.amountReceived = Number(response.data.data.contractAmount)
        }
      })
    },
    handleSetCompany(row) {
      this.contractReceiptForm.companyId = row.id;
      this.contractReceiptForm.companyName = row.companyName;
      this.companyDialogVisible = false;
    },
    handleSubmit() {
      contractReceiptService
        .save(this.contractReceiptForm)
        .then((response) => {
          if (response.data.code === 0) {
            this.$message.success({
              message: "保存成功",
              duration: 1000,
            });
            this.$router.push({
              path: "/ContractReceiptList",
            });
          }
        });
    },
    goBack() {
      history.back();
    },
  },
  computed: {
    token: {
      get() {
        return this.$store.state.token;
      },
    },
    checkRoute() {
      return Object.keys(this.$route.params).length != 0;
    },
  },
  created() {
    if (Object.keys(this.$route.params).length == 0) {
      this.getMaxId();
    } else {
      const row = this.$route.params.row;
      this.selectOne(row.id);
      this.getFileList(row.attachemenIds);
    }
  },
  components: {
    ProjectInfoList,
    // TenderCompanyList,
  },
};
</script>

<style scoped>
.el-input__icon {
  cursor: pointer;
}
</style>
